<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 300px;height: 200px; background-color: red;"></div>
		<input type="button" value="取消" onclick="cancel()" />

		<script>
			window.onload = function() {
				var myDiv = document.getElementsByTagName("div")[0];
				//可以加多次
				//event 事件 listener监听
				myDiv.addEventListener("click", function() {
					// myDiv.style.backgroundColor = "yellow";
					// this就代表当前正在设置的对象myDiv
					this.style.backgroundColor = "yellow";
				});
				myDiv.addEventListener("click", function() {
					myDiv.style.height = "300px";
				});
				myDiv.addEventListener("mouseenter", mouseenter1);
				myDiv.addEventListener("mouseenter", mouseenter2);
				myDiv.addEventListener("mouseenter", mouseenter3);
			}

			function mouseenter1() {
				console.log("mouseenter1");
			}

			function mouseenter2() {
				console.log("mouseenter2");
			}

			function mouseenter3() {
				console.log("mouseenter3");
			}

			function cancel() {
				var myDiv = document.getElementsByTagName("div")[0];
				myDiv.removeEventListener("mouseenter", mouseenter1);
				myDiv.removeEventListener("mouseenter", mouseenter2);
			}
		</script>

	</body>
</html>
